<template>
  <div ref="chart" style=" height: 300px"></div>
</template>
  
  <script>
import * as echarts from "echarts/core";
import http from "@/api/http";
export default {
  data() {
    return {
      chart: null,
      chartData: [],
    };
  },
  methods: {
    async initChart() {
      //!初始化
      this.chart = echarts.init(this.$refs.chart);
      console.log(this.chart);
      // window.addEventListener("resize", function () {
      //   this.chart.resize();
      // });
      try {
        // !！动态获取后端数据
        // console.log(http)
        const response = await http.get("/baoxiu/status_number");
        this.chartData = response.data;
        console.log(response.data);

        // !!!数据对象配置
        this.chart.setOption({
          title: {
            text: "总维修数据",
          },
          tooltip: {},
          yAxis: {},
          xAxis: {
            data: ["待审核", "通过", "处理中", "已完成", "已撤销", "未通过"],
          },
          series: [
            {
              name: "维修数据",
              type: "bar", //必备的选项统计图的类型
              data: this.chartData,
            },
          ],
          label: {
            show: true, // 显示标签
            position: "top", // 标签的位置
            formatter: "{c}", // 标签的内容，{c} 表示系列数据的数值
          },
        });
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
  },
  mounted() {
    // !!!!
    this.initChart();
  },
};
</script>